<template>
	<div>
		<el-card>
			<ChartHead />
			<div style="margin:15px 15px">
				<el-divider content-position="left">
					<h3><i class="el-icon-star-off"></i> 你的考核成绩</h3>
				</el-divider>
			</div>
			<vxe-table border resizable :align="demo1.allAlign" :merge-cells="demo1.mergeCells" :data="demo1.tableData" style="text-align: center">
				<vxe-table-column field="id" width="60"></vxe-table-column>
				<vxe-table-column field="first" title="一级指标"></vxe-table-column>
				<vxe-table-column field="second" title="二级指标"></vxe-table-column>
				<vxe-table-column field="power" title="权重"></vxe-table-column>
				<vxe-table-column field="standard" title="考核标准"></vxe-table-column>
				<vxe-table-column field="goals" title="得分"></vxe-table-column> </vxe-table
			><br />
			<el-row :gutter="20">
				<el-col :span="2" :offset="22"><vxe-button @click="value8 = true" status="primary">申诉</vxe-button></el-col>
			</el-row>
			<vxe-modal v-model="value8" title="申诉" width="600" height="400" show-zoom resize remember>
				<template #default>
					<vxe-form :data="formData3" :rules="formRules3" title-align="right" title-width="60">
						<vxe-form-item
							title="基本信息"
							span="24"
							title-align="left"
							title-width="200px"
							:title-prefix="{ icon: 'fa fa-address-card-o' }"
						></vxe-form-item>
						<vxe-form-item title="姓名" field="name" span="12" :item-render="{ name: 'input', attrs: { placeholder: '请输入姓名' } }"></vxe-form-item>
						<vxe-form-item
							title="部门"
							field="department"
							span="12"
							:item-render="{ name: 'input', attrs: { placeholder: '请输入部门' } }"
						></vxe-form-item>
						<vxe-form-item title="申诉指标" field="second" span="24" :item-render="{ name: '$select', options: secondList }"></vxe-form-item>
						<vxe-form-item
							v-if="Flase"
							title="年龄"
							field="age"
							span="12"
							:item-render="{ name: 'input', attrs: { type: 'number', placeholder: '请输入年龄' } }"
						></vxe-form-item>
						<vxe-form-item
							title="申诉内容"
							span="24"
							title-align="left"
							title-width="200px"
							:title-prefix="{ icon: 'fa fa-info-circle' }"
						></vxe-form-item>
						<vxe-form-item field="refute" span="24" :item-render="{ name: 'textarea', attrs: { placeholder: '请输入申诉内容' } }"></vxe-form-item>
						<vxe-form-item align="right" span="24">
							<template #default>
								<vxe-button type="submit" status="primary">保存</vxe-button>
								<vxe-button type="reset">重置</vxe-button>
								<vxe-button
									@click="
										value8 = false;
										open1();
									"
									status="success"
									>提交</vxe-button
								>
							</template>
						</vxe-form-item>
					</vxe-form>
				</template>
			</vxe-modal>
			<br /><br /><br /><br />

			<div style="margin:15px 15px">
				<el-divider content-position="left">
					<h3><i class="el-icon-edit"></i> 对你的同事进行评价</h3>
				</el-divider>
			</div>
			<vxe-table :align="demo1.allAlign" border resizable :tree-config="{ children: 'children' }" :expand-config="tableExpand" :data="tableData1">
				<vxe-table-column type="expand" width="200" title="测评他人">
					<template #content="{ row }">
						<div v-if="row.job == '产品经理'">
							<vxe-table
								:align="demo1.allAlign"
								border
								resizable
								show-overflow
								keep-source
								ref="xTable"
								:loading="loading"
								:data="tableData3"
								:edit-config="{ trigger: 'manual', mode: 'row' }"
								style="width: 69%; left: 14%"
							>
								<vxe-table-column type="seq" width="60"></vxe-table-column>
								<vxe-table-column field="second" title="二级指标" width="280"></vxe-table-column>
								<vxe-table-column field="power" title="比重" width="60"></vxe-table-column>
								<vxe-table-column field="standard" title="测评标准" width="160"></vxe-table-column>
								<vxe-table-column
									field="name"
									title="测评分数"
									width="100"
									:edit-render="{ name: 'input', attrs: { type: 'text' } }"
								></vxe-table-column>
								<vxe-table-column title="操作" width="160">
									<template #default="{ row }">
										<template v-if="$refs.xTable.isActiveByRow(row)">
											<vxe-button @click="saveRowEvent(row)">保存</vxe-button>
											<vxe-button @click="cancelRowEvent(row)">取消</vxe-button>
										</template>
										<template v-else>
											<vxe-button @click="editRowEvent(row)">编辑</vxe-button>
										</template>
									</template>
								</vxe-table-column>
							</vxe-table>
							<div align='center' style="margin:10px 0 0 0">
								<el-button type="success" round @click="open2">确定提交</el-button>
							</div>
						</div>
						<div v-if="row.job == '后端Java'">
							<vxe-table
								:align="demo1.allAlign"
								border
								resizable
								show-overflow
								keep-source
								ref="xTable"
								:loading="loading"
								:data="tableData2"
								:edit-config="{ trigger: 'manual', mode: 'row' }"
								style="width: 69%; left: 14%"
							>
								<vxe-table-column type="seq" width="60"></vxe-table-column>
								<vxe-table-column field="second" title="二级指标" width="240"></vxe-table-column>
								<vxe-table-column field="power" title="比重" width="60"></vxe-table-column>
								<vxe-table-column field="standard" title="测评标准" width="200"></vxe-table-column>
								<vxe-table-column
									field="name"
									title="测评分数"
									width="100"
									:edit-render="{ name: 'input', attrs: { type: 'text' } }"
								></vxe-table-column>
								<vxe-table-column title="操作" width="160">
									<template #default="{ row }">
										<template v-if="$refs.xTable.isActiveByRow(row)">
											<vxe-button @click="saveRowEvent(row)">保存</vxe-button>
											<vxe-button @click="cancelRowEvent(row)">取消</vxe-button>
										</template>
										<template v-else>
											<vxe-button @click="editRowEvent(row)">编辑</vxe-button>
										</template>
									</template>
								</vxe-table-column>
							</vxe-table>
							<div align='center' style="margin:10px 0 0 0">
								<el-button type="success" round @click="open2">确定提交</el-button>
							</div>
						</div>
						<div v-if="row.job == 'UI'">
							<vxe-table
								:align="demo1.allAlign"
								border
								resizable
								show-overflow
								keep-source
								ref="xTable"
								:loading="loading"
								:data="tableData4"
								:edit-config="{ trigger: 'manual', mode: 'row' }"
								style="width: 69%; left: 14%"
							>
								<vxe-table-column type="seq" width="60"></vxe-table-column>
								<vxe-table-column field="second" title="二级指标" width="280"></vxe-table-column>
								<vxe-table-column field="power" title="比重" width="60"></vxe-table-column>
								<vxe-table-column field="standard" title="测评标准" width="160"></vxe-table-column>
								<vxe-table-column
									field="name"
									title="测评分数"
									width="100"
									:edit-render="{ name: 'input', attrs: { type: 'text' } }"
								></vxe-table-column>
								<vxe-table-column title="操作" width="160">
									<template #default="{ row }">
										<template v-if="$refs.xTable.isActiveByRow(row)">
											<vxe-button @click="saveRowEvent(row)">保存</vxe-button>
											<vxe-button @click="cancelRowEvent(row)">取消</vxe-button>
										</template>
										<template v-else>
											<vxe-button @click="editRowEvent(row)">编辑</vxe-button>
										</template>
									</template>
								</vxe-table-column>
							</vxe-table>
							<div align='center' style="margin:10px 0 0 0">
								<el-button type="success" round @click="open2">确定提交</el-button>
							</div>
						</div>
						<div v-if="row.job == '前端Js'">
							<vxe-table
								:align="demo1.allAlign"
								border
								resizable
								show-overflow
								keep-source
								ref="xTable"
								:loading="loading"
								:data="tableData5"
								:edit-config="{ trigger: 'manual', mode: 'row' }"
								style="width: 69%; left: 14%"
							>
								<vxe-table-column type="seq" width="60"></vxe-table-column>
								<vxe-table-column field="second" title="二级指标" width="280"></vxe-table-column>
								<vxe-table-column field="power" title="比重" width="60"></vxe-table-column>
								<vxe-table-column field="standard" title="测评标准" width="160"></vxe-table-column>
								<vxe-table-column
									field="name"
									title="测评分数"
									width="100"
									:edit-render="{ name: 'input', attrs: { type: 'text' } }"
								></vxe-table-column>
								<vxe-table-column title="操作" width="160">
									<template #default="{ row }">
										<template v-if="$refs.xTable.isActiveByRow(row)">
											<vxe-button @click="saveRowEvent(row)">保存</vxe-button>
											<vxe-button @click="cancelRowEvent(row)">取消</vxe-button>
										</template>
										<template v-else>
											<vxe-button @click="editRowEvent(row)">编辑</vxe-button>
										</template>
									</template>
								</vxe-table-column>
							</vxe-table>
							<div align='center' style="margin:10px 0 0 0">
								<el-button type="success" round @click="open2">确定提交</el-button>
							</div>
						</div>
						<div v-if="row.job == '测试'">
							<vxe-table
								:align="demo1.allAlign"
								border
								resizable
								show-overflow
								keep-source
								ref="xTable"
								:loading="loading"
								:data="tableData5"
								:edit-config="{ trigger: 'manual', mode: 'row' }"
								style="width: 69%; left: 14%"
							>
								<vxe-table-column type="seq" width="60"></vxe-table-column>
								<vxe-table-column field="second" title="二级指标" width="280"></vxe-table-column>
								<vxe-table-column field="power" title="比重" width="60"></vxe-table-column>
								<vxe-table-column field="standard" title="测评标准" width="160"></vxe-table-column>
								<vxe-table-column
									field="name"
									title="测评分数"
									width="100"
									:edit-render="{ name: 'input', attrs: { type: 'text' } }"
								></vxe-table-column>
								<vxe-table-column title="操作" width="160">
									<template #default="{ row }">
										<template v-if="$refs.xTable.isActiveByRow(row)">
											<vxe-button @click="saveRowEvent(row)">保存</vxe-button>
											<vxe-button @click="cancelRowEvent(row)">取消</vxe-button>
										</template>
										<template v-else>
											<vxe-button @click="editRowEvent(row)">编辑</vxe-button>
										</template>
									</template>
								</vxe-table-column>
							</vxe-table>
							<div align='center' style="margin:10px 0 0 0">
								<el-button type="success" round @click="open2">确定提交</el-button>
							</div>
						</div>

					</template>
				</vxe-table-column>
				<vxe-table-column width="347" field="name" title="姓名"></vxe-table-column>
				<vxe-table-column width="347" field="department" title="部门"></vxe-table-column>
				<vxe-table-column width="347" field="job" title="职位"></vxe-table-column>
			</vxe-table>
		</el-card>
	</div>
</template>
<script lang="ts">
import { reactive } from 'vue';
import { VxeTablePropTypes } from 'vxe-table';
import ChartHead from '/@/views/performance_appraisal/staff/head.vue';
import { ref } from 'vue';
import XEUtils from 'xe-utils';
export default {
	name: 'performance_appraisal',
	components: { ChartHead},
	setup() {
		const demo1 = reactive({
			allAlign: 'center',
			tableData: [
				{ id: '1', first: '工作效率（0.3）', second: '单位开发周期计划完成率', power: '0.5', standard: '定量', goals: '85' },
				{
					id: '1',
					first: '工作效率（0.3）',
					second: '单位开发周期模块开发质量',
					power: '0.5',
					standard: 'Bug责任归属，UI、测试、产品岗位由群众评议',
					goals: '80',
				},
				{ id: '2', first: '工作量（0.3）', second: '单位开发周期内完成模块数量', power: '1', standard: '定量', goals: '80' },
				{ id: '3', first: '工作态度（0.2）', second: '工作的认真度、责任度、努力程度', power: '1', standard: '群众测评', goals: '90' },
				{ id: '4', first: '沟通效果（0.2）', second: '难题分享', power: '0.5', standard: '定量', goals: '60' },
				{ id: '5', first: '沟通效果（0.2）', second: '技术交流', power: '0.5', standard: '定量', goals: '75' },
				{ id: '总分', first: '总分', second: '总分', power: '总分', standard: '总分', goals: '80.25' },
			],
			mergeCells: [
				{ row: 0, col: 0, rowspan: 2, colspan: 0 },
				{ row: 0, col: 1, rowspan: 2, colspan: 0 },
				{ row: 4, col: 0, rowspan: 2, colspan: 0 },
				{ row: 4, col: 1, rowspan: 2, colspan: 0 },
				{ row: 6, col: 0, rowspan: 0, colspan: 5 },
			] as VxeTablePropTypes.MergeCells,
		});
		const tableData1 = ref([
			{
				name: '张三',
				department: '研发部',
				job: '产品经理',
			},
			{
				name: '王五',
				department: '研发部',
				job: '后端Java',
			},
			{
				name: '赵六',
				department: '研发部',
				job: '后端Java',
			},
			{
				name: '刘一',
				department: '研发部',
				job: '前端Js',
			},
			{
				name: '陈二',
				department: '研发部',
				job: 'UI',
			},
			{
				name: '孙七',
				department: '研发部',
				job: '测试',
			},
		]);
		const tableData2 = ref([
			{
				second: '单位开发周期模块开发质量',
				power: '15%',
				standard: '群众评议',
			},
			{
				second: '工作的认真度、责任度、努力程度',
				power: '20%',
				standard: '群众测评',
			},
		]);
		const tableData3 = ref([
			{
				second: '需求文档结构清晰、要素完整、便于理解',
				power: '25%',
				standard: '群众测评',
			},
			{
				second: '单位开发周期模块开发质量',
				power: '25%',
				standard: '群众测评',
			},
			{
				second: '配合技术人员理解需求主动性',
				power: '50%',
				standard: '群众测评',
			},
		]);
		const tableData4 = ref([
			{
				second: 'UI设计布局合理、主次分明',
				power: '25%',
				standard: '群众测评',
			},
			{
				second: '配合开发完成相关切图工作',
				power: '25%',
				standard: '群众测评',
			},
			{
				second: '确保上线产品高质量的界面效果',
				power: '50%',
				standard: '群众测评',
			},
		]);
		const tableData5 = ref([
			{
				second: '单元测试能够及时准确',
				power: '20%',
				standard: '群众测评',
			},
			{
				second: '集成测试覆盖全面',
				power: '20%',
				standard: '群众测评',
			},
			{
				second: 'bug指派、关闭及时准确',
				power: '20%',
				standard: '群众测评',
			},
		]);
		const tableExpand = ref({
			lazy: true,
			loadMethod({ row }) {
				return new Promise((resolve) => {
					setTimeout(() => {
						// 随机生成列
						const childCols = XEUtils.sample(
							[
								{ type: 'seq', title: 'Sequence' },
								{ field: 'name', title: 'Name' },
								{ field: 'role', title: 'Role' },
								{ field: 'age', title: 'Age' },
								{ field: 'sex', title: 'Sex' },
							],
							XEUtils.random(3, 5)
						);
						// 随机生成数据
						const childData = XEUtils.sample(
							[
								{ name: 'TEST1', role: 'Develop', age: 20, sex: '女' },
								{ name: 'TEST2', role: 'Develop', age: 22, sex: '女' },
								{ name: 'TEST3', role: 'Develop', age: 24, sex: '男' },
								{ name: 'TEST4', role: 'Develop', age: 26, sex: '女' },
								{ name: 'TEST5', role: 'Develop', age: 28, sex: '男' },
								{ name: 'TEST6', role: 'Develop', age: 30, sex: '男' },
							],
							XEUtils.random(1, 5)
						);
						row.childCols = childCols;
						row.childData = childData;
						resolve();
					}, 500);
				});
			},
		} as VxeTablePropTypes.ExpandConfig);

		return {
			demo1,
			tableData1,
			tableExpand,
			tableData2,
			tableData3,
			tableData4,
			tableData5,
		};
	},
	data() {
		return {
			value1: null,
			value8: false,
			colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
			formData3: {
				name: '',
				department: '',
				second: '',
				refute: null,
			},
			secondList: [
				{ label: '单位开发周期计划完成率', value: '1' },
				{ label: '单位开发周期模块开发质量', value: '2' },
				{ label: '单位开发周期内完成模块数量', value: '3' },
				{ label: '工作的认真度、责任度、努力程度', value: '4' },
				{ label: '难题分享', value: '5' },
				{ label: '技术交流', value: '6' },
			],
			formRules3: {
				name: [
					{ required: true, message: '请输入姓名' },
					{ min: 2, max: 5, message: '长度在 2 到 5 个字符' },
				],
				department: [{ required: true, message: '请输入部门' }],
				second: [{ required: true, message: '请选择指标' }],
			},
		};
	},
	methods: {
		open1() {
			this.$message({
				message: '申诉提交成功',
				type: 'success',
			});
		},
		open2() {
			this.$confirm('是否提交该评价?', '提示', {
				confirmButtonText: '提交',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$message({
					type: 'success',
					message: '提交成功!'
				});
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '取消'
				});
			});
		},
		editRowEvent(row) {
			this.$refs.xTable.setActiveRow(row);
		},
		saveRowEvent(row) {
			this.$refs.xTable.clearActived().then(() => {
				this.loading = true;
				setTimeout(() => {
					this.loading = false;
					this.$message({
						type: 'success',
						message: '保存成功！'
					})
				}, 300);
			});
		},
		cancelRowEvent(row) {
			const xTable = this.$refs.xTable;
			xTable.clearActived().then(() => {
				// 还原行数据
				xTable.revertData(row);
			});
		},
	},
};
</script>
<style lang="scss" scoped>
</style>
